<template>
  <div class="index">
    <!-- 顶部 -->

    <van-search
      shape="round"
      background="#3296fa"
      placeholder="搜索"
      @focus="$router.push('/search')"
    />
    <van-icon
      name="wap-nav"
      class="wapnav"
      @click="$refs.channel.isShow = true"
    />
    <!-- 修改标签弹框 -->
    <channel ref="channel" :channelsList="channelsList" :active.sync="active" />
    <van-tabs sticky :offset-top="66" v-model="active">
      <van-tab
        v-for="(item, index) in channelsList"
        :key="index"
        :title="item.name"
      >
        <van-pull-refresh v-model="item.isLoading" @refresh="onRefresh">
          <van-list
            v-model="item.loading"
            :finished="item.finished"
            finished-text="一滴都不剩了"
            @load="onLoad"
          >
            <!-- 内容 -->
            <van-cell
              class="item"
              v-for="(subitem, sunindex) in item.list"
              :key="sunindex"
            >
              <template #title>
                <!-- 标题 -->
                <h3>{{ subitem.title }}</h3>
                <!-- 图片 -->
                <van-grid
                  v-if="subitem.cover.type !== 0"
                  :border="false"
                  :column-num="3"
                >
                  <van-grid-item
                    v-for="(imgitem, imgindex) in subitem.cover.images"
                    :key="imgindex"
                  >
                    <van-image lazy-load :src="imgitem" />
                  </van-grid-item>
                </van-grid>
                <!-- 底部信息 -->
                <div class="info">
                  <div class="left">
                    <span>{{ subitem.aut_name }}</span>
                    <span>{{ subitem.comm_count }}评论</span>
                    <span>{{ subitem.pubdate | fromtime }}</span>
                  </div>
                  <div class="right">
                    <van-icon
                      name="cross"
                      @click="openMore(subitem)"
                      v-if="hadToken"
                    />
                  </div>
                </div>
              </template>
            </van-cell>
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
    <more
      ref="more"
      :artid="artid"
      :autid="autid"
      @delarticle="delarticle"
    ></more>
  </div>
</template>

<script>
import { getLocal } from '@/utils/local.js'
import { channelsListGet } from '@/api/channel.js'
import { articlesGet } from '@/api/article.js'
import { Lazyload } from 'vant'
import channel from './channel'
import more from './more'
import Vue from 'vue'
Vue.use(Lazyload)

export default {
  components: { channel, more },
  created () {
    // 获取token
    this.hadToken = JSON.parse(getLocal('userInfo'))
    // 打开页面时得到频道数据
    this.getChannelsList()
  },
  methods: {
    // 上拉事件
    async onLoad () {
      const currentChannel = this.channelsList[this.active]
      const id = currentChannel.id
      try {
        const res = await articlesGet(id)
        currentChannel.list = [...currentChannel.list, ...res.data.data.results]
        currentChannel.loading = false
        if (res.data.data.results.length === 0) {
          currentChannel.finished = true
        }
      } catch {
        currentChannel.loading = false
        currentChannel.finished = true
      }
    },
    // 打开更多页面
    openMore (subitem) {
      this.artid = subitem.art_id
      this.autid = subitem.aut_id
      this.$refs.more.show = true
    },
    // 删除页面文章
    delarticle (artid) {
      const list = this.channelsList[this.active].list
      list.forEach((item, index) => {
        if (artid === item.art_id) {
          list.splice(index, 1)
        }
      })
    },
    // 下拉事件
    onRefresh () {
      const currentChannel = this.channelsList[this.active]
      currentChannel.list = []
      // 如果下拉前所有的数据都加载完了，下拉需要将finished改成flase,不然不会执行onload
      currentChannel.finished = false
      currentChannel.loading = true
      this.onLoad()
      currentChannel.isLoading = false
    },
    // 得到标签数据
    async getChannelsList () {
      const mychannels = JSON.parse(getLocal('channels'))
      if (this.hadToken || !mychannels) {
        // 有token 用户已经登录
        const res = await channelsListGet()
        this.channelsList = res.data.data.channels
      } else {
        // 没有登录
        this.channelsList = mychannels
      }
      // 给每个标签添加属性，将数据分开
      this.channelsList.forEach(item => {
        this.$set(item, 'loading', false)
        this.$set(item, 'isLoading', false)
        this.$set(item, 'finished', false)
        this.$set(item, 'list', [])
      })
    }
  },
  data () {
    return {
      hadToken: '',
      channelsList: [],
      active: 0, // 默认选中的页面
      artid: '',
      autid: ''
    }
  }
}
</script>

<style lang="less" scoped>
.index {
  margin-top: 66px;
  .van-search {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 26px 66px 6px 41px;
    z-index: 66;
    .van-search__content {
      background-color: rgba(255, 255, 255, 0.2);
      /deep/ .van-icon-search {
        font-size: 16px;
        color: #fff;
        transform: translateX(112px);
      }
      /deep/ .van-field__control {
        text-indent: 8em;
        &::placeholder {
          color: #fff;
          font-size: 14px;
        }
      }
    }
  }
  .wapnav {
    position: fixed;
    top: 28px;
    right: 6px;
    z-index: 67;
    font-size: 30px;
    color: #fff;
  }
  .van-tabs {
    margin-bottom: 50px;
  }
  .item {
    .info {
      display: flex;
      justify-content: space-between;
      .left {
        span {
          margin-left: 4px;
        }
      }
    }
  }
}
</style>
